<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <script>
        var require = {
            baseUrl: '/',
            paths: {
                'vue': '//cdn.jsdelivr.net/npm/vue/dist/vue'
            }
        };
        
        loadCss = function(config) {
            var head = document.getElementsByTagName('head')[0];
         
            if (config.content) {
                var style  = document.createElement('style');
                style.type = 'text/css';
                
                if (style.styleSheet)
                    style.styleSheet.cssText = config.content;
                else
                    style.innerHTML = config.content;
         
                head.appendChild(style);
            } else if (config.url) {
                var link  = document.createElement('link');
                link.href = config.url;
                link.rel  = 'stylesheet';
                link.type = 'text/css';
                head.appendChild(link);
            }
        };
    </script> 
    <!-- <script data-main="js/app" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js"></script>  -->
    <script data-main="js/app" src="/lib/require.js"></script> 
</head>
<style>
    [v-cloak]{
        display: none;
    }
</style>
<body>
    <div id="app" v-cloak>
        {{ message }}
        <hello>Bob</hello>
        <hello2 name="Jim"></hello2>
        <p>
            <!-- 使用 router-link 组件来导航. -->
            <!-- 通过传入 `to` 属性指定链接. -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <router-link to="/foo">Go to Foo1</router-link>
            <router-link to="/bar">Go to Bar</router-link>
        </p>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>
</body>
</html>